﻿//Writed by XIAO Yang (http://xiaoyang.de)
// JavaScript Document

//var xmlHttp
//I do not understand why we define this....

//This function is used to get a page which the user chooses.
function showContent(str){
	var textWait="<p class=\"cRed\">Loading, please wait...</p><p class=\"cRed\">加载中，请稍等……</p><p class=\"cRed\">Chargement en cours, veuillez patienter ...</p>";
	document.getElementById("content").innerHTML=textWait;
	xmlHttp=GetXmlHttpObject();
	if (xmlHttp==null){
		alert ("Your browser does not support AJAX!");
		return;
	} 
	xmlHttp.onreadystatechange=stateChanged;
	xmlHttp.open("GET",str,true);
	xmlHttp.send(null);
}

//This function is used to change the content div.
function stateChanged(){ 
	if (xmlHttp.readyState==4){
		document.getElementById("content").innerHTML=xmlHttp.responseText;
	}
}

//This function is used to creat a xmlHttpObject according to user's browser.
function GetXmlHttpObject(){
	var xmlHttp=null;
	try{
		// Firefox, Opera 8.0+, Safari
		xmlHttp=new XMLHttpRequest();
	}
	catch (e){
	// Internet Explorer
		try{
			xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
		}
		catch (e){
			xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
	    }
	}
	return xmlHttp;
}



//Define a global variable to note the action onclick down, in order to save the changes
var clickedLi=0;

//This function is use to change the background of the li.
function changeLi(li){
	clickedLi=li;
	
	if(li=="me"){toBright(li);}
		else{	toDark("me");}

	if(li=="photo"){toBright(li);}
		else{	toDark("photo");}

	if(li=="blog"){toBright(li);}
		else{	toDark("blog");}

	if(li=="other"){toBright(li);}
		else{	toDark("other");}
}

//Change the background picture and text color of li to light
function toBright(li){
	setStyle(li, "backgroundPosition", "-128px 0px");
	setStyle(li, "color", "blue");
}

//Change the background picture and text color of li to dark
function toDark(li){
	if(clickedLi!=li){
		setStyle(li, 	"backgroundPosition", "0px 0px");
		setStyle(li, 	"color", "black");
	}
}

//This function is used to change the style of a specified object's value.
function setStyle(objId, style, value){
   document.getElementById(objId).style[style]= value;
}
/* USAGE:
 * objId    = element id.
 * style    = the style to be changed.
 * value    = the value assigned to the style.
*/ 
